<div id="app">
  {{ title }}
  <modal-button>
    弹窗内容。。。
  </modal-button>
</div>
<style>
  .modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .modal div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    width: 300px;
    height: 300px;
    padding: 5px;
  }
</style>
<script type="text/x-template" id="modalButton">
  <button @click="modalOpen = true">打开窗口</button>
  <teleport to="body">
    <div v-if="modalOpen" class="modal">
      <div>
        <slot></slot>
        <button @click="modalOpen = false">关闭</button>
      </div>
    </div>
  </teleport>
</script>
<script>
  const ModalButton = {
    template: '#modalButton',
    data() {
      return {
        modalOpen: false
      }
    },
  }
</script>

<script src="https://unpkg.com/vue@next"></script>
<script>
  const { createApp } = Vue
  createApp({
    data() {
      return {
        title: 'teleport'
      }
    },
    components: {
      ModalButton,
    },
  }).mount('#app')
</script>